<template>
  <div>
    Child: {{count}}
    <button @click="count++">+1</button>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, ref, onBeforeUpdate, onUpdated, onBeforeUnmount , onUnmounted} from 'vue'
export default {
  setup () {
    const count = ref(1)

    // !#1 把 Vue2 的 beforeCreate 和 created 综合成了 setup
    console.log('#1 setup')

    // !#2 Vue3 的生命周期可以写多次
    onBeforeMount(() => {
      console.log('#2.1 onBeforeMount');
    })
    onBeforeMount(() => {
      console.log('#2.2 onBeforeMount');
    })
    onMounted(() => {
      console.log('#3 onMounted');
    })

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    })
    onUpdated(() => {
      console.log('onUpdated');
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    })
    onUnmounted(() => {
      console.log('onUnmounted');
    })

    return {count}
  }
}
</script>

<style lang="scss" scoped>

</style>